<!--
 * @Description: mine
 * @Author: 刘盛
 * @Date: 2021-08-10 13:23:06
 * @LastEditors: 刘盛
 * @LastEditTime: 2022-05-17 19:46:27
-->
<template>
  <div>
    <div class="header">
      <div class="user">
        <div class="photo">
          <van-image  round width="100%" height="100%" 
            src="http://121.199.29.84:8888/group1/M00/00/22/rBD-SWCvayiAFxbEAACkVLvvWi0588.jpg"/> 
          <p class="name">admin1</p>
          </div>
          <div class="flex">
            <van-row type="flex" gutter="150" class="flex_item" justify="">
              <van-col span="150" class="user-text11">账户余额</van-col>
              <van-col span="150" class="user-text22">5492.1</van-col>
            </van-row>
            <div class="flex_item">
              <van-button round type="primary"
               color="linear-gradient(90deg,#7579ff,#bf73ff)"
               is-link @click="showPopup">充值
              </van-button>
              
            </div>
          </div>
      </div>
    </div>
    <div class="cellArea">
      <div>
        <!-- <img width="20px" src="	http://47.98.118.13/briup-ej-app/static/img/address.9bf343ab.png" alt="">
        <span class="span-text">常用地址</span> -->
        <van-cell title="常用地址" icon="http://47.98.118.13/briup-ej-app/static/img/address.9bf343ab.png" 
        is-link to="address" />
      </div>
      <div>
        <!-- <img width="20px" src="http://47.98.118.13/briup-ej-app/static/img/lianxi.9b35ecd9.png" alt="">
        <span class="span-text">联系我们</span> -->
        <van-cell title="联系我们" icon="http://47.98.118.13/briup-ej-app/static/img/lianxi.9b35ecd9.png" is-link to="" />
      </div>
       
    </div>
    <div class="logout_btn">
      <!-- <van-button round type="primary" color="linear-gradient(90deg,#7579ff,#bf73ff)" size="large">退出登录</van-button> -->
      <van-button round class="btn" type="primary" size="large"
       color="linear-gradient(90deg,#7579ff,#bf73ff)" @click="Dialog">退出登录</van-button>
    </div>

    <!-- <button @click="$router.push('address')">跳转到服务地址页面</button> -->
  </div>
</template>

<script>
export default {

  data() {
    return {
      msg:'',
      show: false,
    };
  },
  computed: {},
  methods: {
    //确认/取消的弹出框
    Dialog(){
        this.$dialog.confirm({
            title:'',
            message:'是否退出登录',
            confirmButtonColor:' rgb(120, 121, 255)'
        }).then(()=>{
            console.log('点击确认')
        }).catch(()=>{
            console.log('点击取消')
        })},

        showPopup() {
      this.show = true;},
  },
  created() {},
  mounted() {
  },
  };
</script>
<style scoped>
.header{
  height: 180px;
  background-image: linear-gradient(90deg,#7579ff,#bf73ff);
  border-bottom-left-radius: 50%;
  border-bottom-right-radius: 50%;
}
  
.photo{ 
  height: 95px;
  width: 95px;
  position: absolute;
  left: 50%;
  transform: translate(-50%,-50%);
}

.photo .name{
    width: 50%;
    margin: 0 auto;
    margin-top: 3px;
    text-align: center;
}

.user{
    width: 80%;
    height: 170px;
    background-color: #fff;
    position: absolute;
    top: 170px;
    left: 50%;
    transform: translate(-50%,-50%);
    opacity: .8;
    box-shadow: 0 0 10px #ccc;
    border-radius: 8px;
    padding: 0 1em;
}

.flex{
    display: flex;
    justify-content: space-around;
    margin-top: 110px;
}

 .flex_item{
    width: 25%;
    height: 40px;
    text-align: center;
    cursor: pointer;
} 

 .user-text11 {
    margin-top: -5px; 
    font-size: 16px;
    color: #999;
}

 .user-text22 {
    font-size: 22px;
    margin-top: 5px;
    color: #7579ff;
 }

.cellArea {
    margin: 130px auto;
    box-shadow: 4px 4px 4px 0 rgb(158 117 255 / 20%);
    transition: .3s;
    width: 95%;
    border-radius: 5px;
}

.van-icon__image {
    display: block;
    width: 20px;
    height: 20px;
    object-fit: contain;
}

.van-cell__title, .van-cell__value {
    font-size: 16px;
    margin-left: 10px;
}

.logout_btn {
    width: 53%;
    height: 40px;
    text-align: center;
    color: #fff;
    border-radius: 22px;
    line-height: 40px;
    margin: 0 auto;
    margin-top: 25pxS;
    cursor: pointer;
}

</style>
